client/composables/forms/initForm.js (1)

Line range hint 89-116: Add layout_rtl to default values.

The setFormDefaults function should include the new layout_rtl property to maintain consistency with the initialization defaults.

Apply this diff:

   const defaultValues = {
     title: 'Untitled Form',
     visibility: 'public',
     theme: 'default',
     width: 'centered',
     size: 'md',
     border_radius: 'small',
     dark_mode: 'light',
     color: '#3B82F6',
     hide_title: false,
     uppercase_labels: false,
     no_branding: false,
     transparent_background: false,
     submit_button_text: 'Submit',
     confetti_on_submission: false,
     show_progress_bar: false,
     bypass_success_page: false,
     can_be_indexed: true,
     use_captcha: false,
+    layout_rtl: false,
     properties: [],
   }

api/app/Http/Resources/FormResource.php (2)

Line range hint 11-11: Add PHPDoc for the cleanings property.

Consider adding documentation to explain the purpose and expected structure of the cleanings array.

+    /**
+     * Array of cleaning operations for the form.
+     *
+     * @var array
+     */
     private array $cleanings = [];

---

77-77: Consider grouping related layout properties together.

For better code organization, consider grouping the layout_rtl field with other layout-related properties like width and theme.

             'theme' => $this->theme,
             'width' => 'centered',
+            'layout_rtl' => $this->layout_rtl,
             'is_password_protected' => true,
             'has_password' => $this->has_password,
-            'layout_rtl' => $this->layout_rtl,
             'no_branding' => $this->no_branding,

api/app/Http/Requests/UserFormRequest.php (2)

36-36: Consider enhancing the layout_rtl validation rule.

While the boolean validation is appropriate, consider these improvements to maintain consistency with other UI-related fields:

1. Add the 'required' rule like other UI customization fields
2. Use Rule::in([true, false]) for stricter validation
3. Add a PHPDoc comment describing the field's purpose

-            'layout_rtl' => 'boolean',
+            // Controls the form's text direction (right-to-left mode)
+            'layout_rtl' => ['required', 'boolean', Rule::in([true, false])],

---

Line range hint 10-13: Consider updating class documentation.

The class documentation could be enhanced to mention the RTL layout support as part of the form customization features.

 /**
  * Abstract class to validate create/update forms
+ * Supports form customization including themes, layouts (including RTL), and styling
  *
  * Class UserFormRequest
  */

client/components/open/forms/components/form-components/FormCustomization.vue (1)

116-123: Implementation looks good, with some UX enhancement opportunities.

The RTL toggle switch implementation is clean and follows the established patterns. The placement in the Layout & Sizing section is appropriate, and the help text is clear.

Consider these UX enhancements:

1. Add a visual indicator (like ←/→) to help users quickly identify the current text direction
2. Consider previewing the RTL layout change in real-time within the form editor

Example enhancement:

     <ToggleSwitchInput
       name="layout_rtl"
       :form="form"
       class="mt-4"
-      label="Right-to-Left Layout"
+      label="Right-to-Left Layout (←)"
       help="Adjusts form layout for right-to-left languages."
+      @update:model-value="previewRTLLayout"
     />

client/pages/forms/[slug]/index.vue (1)

23-23: LGTM! Consider extracting the RTL direction logic to a computed property.

The RTL style binding is correctly implemented. However, since this RTL logic might be reused elsewhere in the component, consider extracting it to a computed property for better maintainability and reusability.

+ const getDirection = computed(() => form.value?.layout_rtl ? 'rtl' : 'ltr')
- :style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
+ :style="{ direction: getDirection }"

client/components/open/forms/OpenCompleteForm.vue (2)

5-5: Simplify the RTL direction binding.

The optional chaining operator (?.) is redundant since the parent div already has v-if="form". Consider simplifying and adding a default value:

-    :style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
+    :style="{ '--font-family': form.font_family, 'direction': form.layout_rtl || false ? 'rtl' : 'ltr' }"

---

Line range hint 1-400: Consider comprehensive RTL testing and accessibility.

The RTL implementation looks good, but please ensure:

1. Testing with various RTL languages (Arabic, Hebrew, Persian, etc.)
2. Verification of form elements alignment in RTL mode
3. Testing with screen readers and RTL text-to-speech
4. Validation of bidirectional text rendering

Consider adding RTL-specific test cases to your end-to-end testing suite.

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for existing form queries that might need updating
rg -l "select.*from\s+forms" --type php

#!/bin/bash
# Let's try a more comprehensive search for form queries using different patterns
rg -l "forms.*where|from\s+forms|join\s+forms" --type php

# Also search for Eloquent query usage
rg -l "Form::where|Form::select|Form::find" --type php

# Check for model definition to understand query patterns
fd Form.php

# Look for repository or service classes that might handle form queries
fd -e php -E "migrations" | grep -i "form"

#!/bin/bash
# Let's examine the Form model and any existing queries that might need to consider the new column
cat api/app/Models/Forms/Form.php

# Check form-related controllers for query patterns
cat api/app/Http/Controllers/Forms/FormController.php

# Look for any existing boolean column filtering in forms
rg "where\(['\"]forms['\"].*true|false" --type php

#!/bin/bash
# Description: Verify RTL implementation in related Vue components
# Expected: Find RTL-related bindings and logic in the components

echo "Checking OpenCompleteForm.vue for RTL text direction..."
rg -A 3 "layout_rtl" "client/components/forms/OpenCompleteForm.vue" || echo "File not found or no matches"

echo -e "\nChecking FormCustomization.vue for RTL toggle..."
rg -A 3 "layout_rtl" "client/components/forms/FormCustomization.vue" || echo "File not found or no matches"

echo -e "\nChecking FormEditorPreview.vue for RTL styles..."
rg -A 3 "layout_rtl" "client/components/forms/FormEditorPreview.vue" || echo "File not found or no matches"

#!/bin/bash
# First, let's find all Vue files that might contain RTL-related code
echo "Finding Vue files with RTL-related code..."
rg -l "layout_rtl|direction.*rtl" --type vue

echo -e "\nChecking for RTL-related imports and usage..."
rg -A 3 "layout_rtl" --type vue

echo -e "\nFinding all form-related Vue components..."
fd ".vue$" --type f | grep -i "form"

#!/bin/bash
# Search for RTL implementation in the identified form components
echo "Checking FormCustomization.vue for RTL implementation..."
rg -A 3 "layout_rtl|direction.*rtl" "client/components/open/forms/components/form-components/FormCustomization.vue"

echo -e "\nChecking FormEditorPreview.vue for RTL implementation..."
rg -A 3 "layout_rtl|direction.*rtl" "client/components/open/forms/components/form-components/FormEditorPreview.vue"

echo -e "\nChecking OpenForm.vue for RTL implementation..."
rg -A 3 "layout_rtl|direction.*rtl" "client/components/open/forms/OpenForm.vue"

echo -e "\nChecking VForm.vue for RTL implementation..."
rg -A 3 "layout_rtl|direction.*rtl" "client/components/forms/VForm.vue"

-    private function getCleanigns()
+    private function getCleanings()
     {
         return $this->extra?->cleanings ?? $this->cleanings;
     }

-            'cleanings' => $this->getCleanigns(),
+            'cleanings' => $this->getCleanings(),

-    private function getCleanigns()
+    private function getCleanings()

#!/bin/bash
# Search for any references to the misspelled method
rg "getCleanigns"

#!/bin/bash
# Search for RTL-specific positioning in styles or classes
rg -t vue "right-\d+|left-\d+.*rtl" client/

-class="max-w-60 h-20 object-contain absolute transition-all"
+:class="[
+  'max-w-60 h-20 object-contain absolute transition-all',
+  form?.layout_rtl ? 'right-0' : 'left-0'
+]"

#!/bin/bash
# Search for focus-related logic that might need RTL consideration
rg -l 'focus|autofocus' --type vue

#!/bin/bash
# Search for focus-related logic with ripgrep, without file type filter
rg -l 'focus|autofocus' client/

#!/bin/bash
# Let's examine the focus-related code in FormCustomization.vue and related form components
rg 'focus|autofocus' -A 3 -B 3 client/components/open/forms/components/form-components/FormCustomization.vue

# Also check the form initialization logic
rg 'focus|autofocus' -A 3 -B 3 client/composables/forms/initForm.js

#!/bin/bash
# Let's check how the auto_focus setting is actually used in the form rendering
rg 'auto_focus' -A 5 -B 5 client/pages/forms/[slug]/index.vue

# Also check if there's any RTL-specific focus handling
rg 'rtl.*focus|focus.*rtl' client/

#!/bin/bash
# Let's examine the focusOnFirstFormElement function implementation
rg -A 10 'function focusOnFirstFormElement' client/pages/forms/[slug]/index.vue

# Also check for any RTL-related layout code
rg -A 3 'layout_rtl' client/

<div :style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }">

#!/bin/bash
# Description: Check if TextBlock component has any explicit direction styles that might conflict with RTL

# Test: Search for direction-related styles in TextBlock component
rg -t vue "direction|rtl|ltr" --glob "TextBlock.vue"

#!/bin/bash
# Search for TextBlock component file first
fd "TextBlock.vue"

# Then search for direction-related styles in the found files
rg "direction|rtl|ltr" $(fd "TextBlock.vue")

# Also check for any CSS classes that might affect text direction
rg "class=.*(?:direction|rtl|ltr)" $(fd "TextBlock.vue")

# Look for any v-bind directives that might set direction
rg ":style|:class" $(fd "TextBlock.vue")

#!/bin/bash
# Let's examine the TextBlock component content
cat client/components/forms/TextBlock.vue

# Also check parent component for any RTL-related styles or classes
cat client/components/open/forms/OpenCompleteForm.vue